<template>
  <div class="container">
    <Header :showRefresh="false" @refresh="() => {}" />
    <el-row :gutter="20">
      <!-- 网关树 -->
      <el-col :xs="8" :sm="6">
        <div class="page-main">
          <el-tree
            ref="gatwayTreeRef"
            :data="treeData"
            node-key="id"
            :default-expand-all="true"
            :expand-on-click-node="false"
            :props="defaultProps"
            @node-click="handleChange"
          >
            <template #default="{ node }">
              <!-- data -->
              <span class="custom-tree-node">
                <span  :title="node.label">{{ node.label }}</span>
                <span class="right">
                  <!-- <b :class="{'success': data.status === 1}" /> -->
                </span>
              </span>
            </template>
          </el-tree>
        </div>
      </el-col>
      <!-- 网关详情 -->
      <el-col :xs="16" :sm="18">
        <div class="page-main right-part">
          <h4>{{ infoData.name }}</h4>
          <DetailInfo :data="infoData" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="jsx">
import { ref, onMounted, defineComponent, reactive, nextTick } from "vue";
import Header from "@/components/Header.vue";
import DetailInfo from './components/DetailInfo.vue';
import { getApplyPlatformLabel } from "@/api/cascade";
export default defineComponent({
  name: "CascadeConfig",
  components: {
    Header,
    DetailInfo
  },
  setup(props, { emit, slots }) {
    const activeId = ref(null)
    const gatwayTreeRef = ref(null)
    const infoData = ref({})
    const defaultProps = {
      children: 'children',
      label: 'name',
    }
    const treeData = ref([])
    const getTree = async() => {
      const res = await getApplyPlatformLabel(activeId.value)
      treeData.value = res.data
      infoData.value = {...res.data[0]}
      activeId.value =  infoData.value.id
      nextTick(() => {
        gatwayTreeRef.value.setCurrentKey(activeId.value)
      })
    }

    const handleChange = async(val) => {
      infoData.value  = {...val}
      activeId.value = val.id
    }

    onMounted(() => {
      getTree()
    });

    return {
      gatwayTreeRef,
      treeData,
      defaultProps,
      infoData,
      activeId,
      handleChange
    };
  },
});
</script>
<style lang="scss" scoped>
.page-main {
  height: calc(100vh - 120px);
  &.right-part {
    padding: 0;
    border-radius: 4px;
    > h4 {
      padding: 0 40px;
      height: 70px;
      line-height: 70px;
      border-bottom: 1px solid #e7eaf1;
    }
  }
}
:deep(.el-tree-node__content) {
  height: 36px;
}
.custom-tree-node {
  display: flex;
  width: 100%;
  overflow: hidden;
  height: 36px;
  line-height: 36px;
  span {
    display: inline-block;
    width: calc(100% - 10px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
  }
  .right {
    width: 10px;
    padding-right: 4px;
    b {
      display: inline-block;
      width: 6px;
      height:6px;
      border-radius: 50%;
      background: #F42F2F;
      &.success {
        background: #2ACF8A;
      }
    }
  }
}
:deep(.el-tree-node) {
  
  &.is-current {
    >.el-tree-node__content {
      color: #2E69EB;
      background-color: #F6F9FF;
    }
  }
}
</style>